<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            width: 500px;
            height: 500px;
            background-color: pink;
            display: flex;
            /* 此处设置为水平布局。 */
            /* flex-direction: column-reverse; */
            /* 此处设置水平方向。column 垂直，row水平。 */
            /* flex-wrap: wrap; */
            /* 此处设置换行。 */
            /* justify-content: center; */
            /* 此处设置居中对齐。 */
            /* justify-content: space-between; */
            /* 此处设置分散居中。 */
            /* justify-content: space-around; */
            /* 此处设置不靠边分散居中。 */
            /* align-items: center; */
            /* 此处定义垂直对齐方式。
            align-items: stretch; */ 
            /* 此处会自动撑满父元素（如果没有设置高度的话） */
            /* align-content: center;    */
        }
        .b{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .c{
            width: 100px;
            height: 100px;
            background-color: blue;
            /* order: 1; */
            /* order默认为0,数字越大，顺序越后面。 */
            flex-grow: 0;
            /* 此处设置放大比例，默认为0. */
            flex:1 0 100px;
            /* 此处对应顺序为：order，shrink，basis。 */
        }
        .d{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b">1</div>
        <div class="c">2</div>
        <div class="d">3</div>
        <!-- <div class="d">3</div>
        <div class="d">3</div>
        <div class="d">3</div>
        <div class="d">3</div> -->
    </div>
</body>
</html>